import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted,
  getCurrentInstance,
} from 'vue'
import { use找组件 } from 'amtf/hooks'
import emitter from 'amtf/utils/emitter'
import { use样式 } from 'amtf/hooks'
import { getValByUnit, 拼组件名 } from 'amtf/utils'
const 主名 = 'checkbox'
const 组件名 = 拼组件名(主名)

export default defineComponent({
  name: 组件名,
  props: {
    // 当前 checkbox 选中状态,实现 v-model
    modelValue: {
      type: [String, Number, Boolean],
      default: null,
    },
    label: {
      type: [String],
      default: null,
    },
    // is disabled checked
    disabled: Boolean,
    // partial selection effect
    indeterminate: Boolean,
    // 是否是可控组件
    isControlled: {
      type: Boolean,
      default: false,
    },
    // isControlled 为 true 时生效
    isSelected: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit, slots, expose }) {
    // const instance = getCurrentInstance()
    // console.log(`instance 👉`, instance)
    const { 拼样式名_提前传主名 } = use样式(主名)

    const model = ref(props.modelValue)
    let checkboxGroup
    const { 找父组件 } = use找组件()

    const checkboxClass = computed(() => {
      // let kk = [
      //   拼样式名_提前传主名('content'),
      //   {
      //     [拼样式名_提前传主名('checked')]: internalIsSelected.value,
      //     [拼样式名_提前传主名('disabled')]: props.disabled,
      //     [拼样式名_提前传主名('indeterminate')]: props.indeterminate,
      //   },
      // ]
      const classes = [
        拼样式名_提前传主名('content'),
        internalIsSelected.value ? 拼样式名_提前传主名('checked') : '',
        props.disabled ? 拼样式名_提前传主名('disabled') : '',
        props.indeterminate ? 拼样式名_提前传主名('indeterminate') : '',
      ]
      // 过滤掉空字符串并用空格连接
      return classes.filter((cls) => cls).join(' ')
    })

    const checkboxStyle = computed(() => ({
      display:
        checkboxGroup && checkboxGroup.isVerticalShow
          ? 'block'
          : 'inline-block',
    }))

    const internalIsSelected = computed(() => {
      // console.log(`props.isSelected 👉`, props.isSelected)
      // console.log(`model.value 👉`, model.value)
      let kk = props.isControlled ? props.isSelected : model.value
      // console.log(`internalIsSelected computed kk 👉`, kk)
      return kk
    })

    watch(
      () => props.modelValue,
      () => {
        console.log(`单个 选择框 props.modelValue 改变 ing👇`, props.modelValue)
        updateModelBySingle()
      }
    )

    function checkboxChange(event) {
      console.log(`checkboxChange ing👇`)
      if (props.disabled) {
        return false
      }
      const isChecked = event.target.checked
      console.log(`props.isControlled 👉`, props.isControlled)

      if (!props.isControlled) {
        emit('input', isChecked)
      }
      emit('update:modelValue', isChecked)

      // console.log(`emit('on-checked-change ing👇`)
      // emit('on-checked-change', isChecked)
      emit('checked-change', isChecked)

      // console.log(`isCheckBoxGroup() 👉`, isCheckBoxGroup())
      if (isCheckBoxGroup()) {
        console.log(`是 isCheckBoxGroup 👉`, checkboxGroup)
        checkboxGroup.exposed.updateModel(props.label, isChecked)
      }
    }

    function isCheckBoxGroup() {
      checkboxGroup = 找父组件(拼组件名('checkbox-group'))
      // console.log(`checkboxGroup 👉`, checkboxGroup)
      return checkboxGroup ? true : false
    }

    function getLabelContent() {
      return props.label ? props.label : null
    }

    function initModel() {
      if (isCheckBoxGroup()) {
        let group = checkboxGroup.proxy.modelValue
        // console.log(`initModel isCheckBoxGroup group 👉`, group)
        if (Array.isArray(group) && group.length > 0) {
          if (group.indexOf(props.label) > -1) {
            model.value = true
          }
        }
      } else {
        model.value = props.modelValue
      }
    }

    function updateModelBySingle() {
      // console.log(`updateModelBySingle ing👇`)
      if (!props.disabled) {
        model.value = props.modelValue
        // console.log(` model.value 👉`, model.value)
      }
    }

    function updateModelByGroup(checkBoxGroup) {
      // console.log(`updateModelByGroup checkBoxGroup👉`, checkBoxGroup)
      if (checkBoxGroup.indexOf(props.label) > -1) {
        if (!props.disabled) {
          model.value = true
        }
      } else {
        if (!props.disabled) {
          model.value = false
        }
      }
    }

    // emitter.on('多选组事件', (value) => {
    //   if (isCheckBoxGroup()) {
    //     updateModelByGroup(value)
    //   }
    // })

    // 在组件卸载时解绑send-toy事件
    onUnmounted(() => {
      // emitter.off('多选组事件')
    })

    onMounted(() => {
      initModel()
    })
    expose({ updateModelByGroup })

    return () => (
      <label class={'ve-checkbox'} style={checkboxStyle.value}>
        <span class={checkboxClass.value}>
          <input
            checked={internalIsSelected.value}
            class={拼样式名_提前传主名('input')}
            type="checkbox"
            value={props.label}
            onChange={checkboxChange}
          />
          <span class={拼样式名_提前传主名('inner')}></span>
        </span>
        <span class={拼样式名_提前传主名('label')}>{getLabelContent()}</span>
        {/* <div>internalIsSelected.value== {`${internalIsSelected.value}`}</div>
        <div>model.value== {`${model.value}`}</div> */}
      </label>
    )
  },
})
